<template>
  <div class="homenav">
       <ul>
          <li v-for="(v,i) in this.$store.state.brr" :key="i" @click="fun(i)" :class="v.style?'red':''">{{v.title}}</li>
      </ul>
  </div>
</template>

<script>
export default {
     created () {
        //在页面加载时读取localStorage里的状态信息
        if (localStorage.getItem("data") ) {
            //replaceState替换数据 Object.assign合并对象
            this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("data"))))
        } 
        //在页面刷新时将vuex里的信息保存到localStorage里
        window.addEventListener("beforeunload",()=>{
            localStorage.setItem("data",JSON.stringify(this.$store.state))
        })
      },
methods:{
    fun(i){
        switch(this.$store.state.brr[i].title){
            case "推荐":
                this.$store.commit("upbrr",i)
                this.$router.push("/home/recommended");
                break
            case "免费课":
                this.$store.commit("upbrr",i)
                this.$router.push("/home/free");
                break
            case "实战课":
                this.$store.commit("upbrr",i)
                this.$router.push("/home/actual");
                break
            case "体系课":
                this.$store.commit("upbrr",i)
                this.$router.push("/home/system");
                break
            case "专栏":
                this.$store.commit("upbrr",i)
                this.$router.push("/home/column");
                break
            case "教程":
                this.$store.commit("upbrr",i)
                this.$router.push("/home/tutorial");         
                break    
        }
    }
}
}
</script>

<style scoped>
.homenav{
    margin-top: 0.1rem;
}
.homenav>ul{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    font-size: 0.13rem;
}
.red{
    color: #ef2d24;
}
</style>